<template>
    <div
        class="menus-box"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div class="role-right">
            <!--查询面板-->
            <SearchPanel ref="searchPanel" :selectOptions="selectOptions" :search-config="searchConfig" @startSearch="startSearch">
                <el-form-item>
                    <el-button icon="el-icon-plus" type="primary" size="mini" @click="addOrUpdateHandle(null, 1)">新增</el-button>
                </el-form-item>
            </SearchPanel>

            <!-- 查询结果 -->
            <ResultListPanel
                tableRef="table"
                ref="multipleTable"
                :checkBoxEnable="true"
                :data="dataList ? dataList : []"
                :listConfig="resultColConfig"
                :listLoading="listLoading"
                @actionClick="actionClick"
                @paginationChange="paginationChange"
                :tagTextExchange="tagTextExchange"
                @selectionChange="selectionChange"
            ></ResultListPanel>
        </div>
    </div>
</template>
<script>
import { INDEX_SEARCH_CONFIG, INDEX_SEARCH_RESULT_ITEMS, INDEX_SEARCH_SELECT_OPTIONS_CONFIG } from './config';
import ResultListPanel from '../../components/ResultListPanel';
import SearchPanel from '../../components/SearchPanel';
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import { mapGetters } from 'vuex';

import { checkFlowStatus } from '../../utils/util';

export default {
    components: {
        ResultListPanel,
        SearchPanel
    },
    data() {
        return {
            dataForm: {},
            dataListLoading: false,
            addOrUpdateVisible: false,
            dialogVisible: false,
            dialogTitle: '新增',
            dateSelectOptions: [], // 选中的
            // 搜索项配置
            searchConfig: INDEX_SEARCH_CONFIG,
            resultColConfig: INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表

            /* 分页查询数据 */
            pageSize: 10,
            pageNum: 1,
            totalPage: 0,
            /* 查询条件参数 */
            addForm: {
                name: '',
                checkStatus: '0',
                flowStatus: null
            },
            type: 1,
            loading: false,

            selectOptions: INDEX_SEARCH_SELECT_OPTIONS_CONFIG
        };
    },

    mounted() {
        this.getList();
    },
    methods: {
        /***
         * 触发 行操作按钮
         * @param data
         * @param item
         */
        actionClick([data, item]) {
            if (item.alias === 'edit') {
                this.addOrUpdateHandle(data, 2);
            } else if (item.alias === 'show') {
                this.show(data);
            } else if (item.alias === 'del') {
                this.delete(data);
            }
        },
        tagTextExchange([data, item]) {
            if (item.alias == 'flowStatusEnumStr') {
                return data.flowStatusEnumStr;
            }

            if (item.alias == 'flowStatus') {
                return checkFlowStatus(data.flowStatus);
            }
        },
        // 选择角色
        selectionChange(val) {
            console.log(val);
            this.dateSelectOptions = val;
        },
        // 新增或者编辑
        addOrUpdateHandle(items, type) {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                // 编辑
                if (type == 2) {
                    this.listLoading = true;

                    this.$router.push({ path: '/iapropertyright/addOrUp', query: { itemData: items, type: 2 } });
                } else {
                    this.$router.push({ path: '/iapropertyright/addOrUp', query: { itemData: null, type: type } });
                }
            });
        },
        /**
         * 分页器发生改变
         * @param page
         */
        paginationChange(page) {
            this.pageSize = page.pageSize;
            this.pageNum = page.pageNo;
            this.getList();
        },
        /***
         * 搜索面板出发搜索事件
         * @param params
         */
        startSearch(params) {
            this.dataForm = params;
            this.pageNum = 1;
            this.$set(this.$refs.multipleTable['pageParams'], 'pageNum', 1);

            this.getList();
        },
        //查看
        show(data) {
            this.$router.push({ path: '/iapropertyright/show', query: { itemData: data } });
        },
        // 删除
        delete(row) {
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: (action) => {
                    if (action !== 'cancel') {
                        API.iapropertyright.deliaPropertyRight({ id: row.id }).then((res) => {
                            if (res.code == '0000') {
                                this.$message({
                                    type: 'success',
                                    message: `删除成功`
                                });
                                this.getList();
                            }
                        });
                    }
                }
            });
        },

        // 编辑
        Edit(data) {
            this.type = 2;
            this.dialogVisible = true;
            this.addForm = {
                appId: data.appId,
                appName: data.appName,
                pid: data.pid,
                appType: data.appType,
                callback: data.callback
            };
        },
        getList() {
            let params = cloneDeep(this.dataForm);
            params.pageNum = this.pageNum;
            params.pageSize = this.pageSize;
            this.listLoading = true;
            this.loading = true;
            API.iapropertyright.getiaPropertyRightList(params).then((res) => {
                this.listLoading = false;
                this.loading = false;
                // if (res.code == '0000') {
                this.totalPage = res.total;
                this.dataList = res.result.rows;
                this.$set(this.$refs.multipleTable['pageParams'], 'total', res.total);
                // }
            });
        }
    }
};
</script>
<style scoped>
.menus-box {
    background: #fff;
    padding: 20px;
    min-height: 100%;
}
</style>